<template>
  <view class="page">
    <!-- <view class="header"> -->
      <!-- <view class="icon-box g-mr-10"> -->
        <!-- <image class="icon-location g-mr-5" src="/static/images/icon-l.png" mode="widthFix"></image>
        <text>广州</text> -->
      <!-- </view> -->
      <!-- <input type="text" value="" placeholder="岗位" class="header-search" /> -->
    <!-- </view> -->
    <swiper class="swiper" indicator-dots indicator-active-color="#fff" autoplay circular>
      <swiper-item v-for='n in 3' :key='n'>
        <image src="https://img.mukewang.com/5ee24f3000017d0218720764.jpg"></image>
      </swiper-item>
    </swiper>
    <view class="nav">
		
      <!-- <navigator v-for="(vo,index) in category" :key="index" open-type="switchTab" class="nav-item" @click="qiehuan(vo.id)">
        <image src="../../static/images/nav1.png"></image>
        <view>{{vo.name}}</view>
      </navigator> -->
	  
      
    </view>

    <view class='title title-1'>闲客头条</view>
    <view class="area-1">
		
      <view class='bg bg-1' @click="gotogangwei()">
        <view class="g-mr-10">
          <view>兼职酒店</view>
          <view>体验师</view>
        </view>
        <image src="../../static/images/top1.png" mode='widthFix'></image>
      </view>
	  
      <view class='bg bg-2' @click="gotogangwei()">
        <view class="g-mr-10">
          <view>日结任务</view>
          <view>极速到账</view>
        </view>
        <image src="../../static/images/top2.png" mode='widthFix'></image>
      </view>
	  
      <view class='bg bg-3' @click="gotogangwei()">
        <view class="g-mr-10">
          <view>兼职辅导</view>
          <view>员</view>
        </view>
        <image src="../../static/images/top3.png" mode='widthFix'></image>
      </view>
	  
      <view class='bg bg-4' @click="gotogangwei()">
        <view class="g-mr-10">
          <view>翻译灵活</view>
          <view>收入</view>
        </view>
        <image src="../../static/images/top4.png" mode='widthFix'></image>
      </view> 
	  
      <view class='bg bg-5' @click="gotogangwei()">
        <view class="g-mr-5">
          <view>手机输入员</view>
          <view>点我开始</view>
        </view>
        <image src="../../static/images/top5.png" mode='widthFix'></image>
      </view>
	  
      <view class='bg bg-6' @click="gotogangwei()">
        <view class="g-mr-10">
          <view>设计外包</view>
          <view>兼职</view>
        </view>
        <image src="../../static/images/top6.png" mode='widthFix' style="width: 60upx;"></image>
      </view>
    </view>
	
    <view v-for="(vo,index) in goods" :key="index" class="job-line job-line-2" @click="gotodetail(vo.id)">
      <image src="../../static/images/p.png" class='job-thumb'></image>
      <view>
        <view class='job-title one-overflow'>{{vo.post_title}}</view>
        <view><text class="g-mr-10">{{vo.salary}}</text><!-- <text>全国全市</text> --></view>
      </view>
      <button type="default">报名</button>
    </view>
	
	<!-- url="'' + vo.id" -->
	
    
    <!-- <view class="title g-mt-20">猜你喜欢</view>
    <navigator class='job' v-for='n in 3' :key='n' url='../detail/detail'>
      <image src="../../static/images/logo.png" class="job-thumb"></image>
      <view>
        <view class='job-title one-overflow'>在家刷抖音 转发视频 好玩赚钱</view>
        <view>
          <text class="color-red">488元/天</text>
          <text class='color-gray g-ml-5 g-mr-5'>|</text>
          <text class='color-gray font-14'>当天结算</text>
        </view>
        <view>
          <text class="color-gray font-14">全市</text>
          <text class='color-gray font-14 g-ml-5 g-mr-5'>|</text>
          <text class='color-gray font-14'>当天结算</text>
        </view>
      </view>
    </navigator> -->
  </view>
  
  
</template>

<script>
	 import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'

  export default {
    data() {
      return {
        title: 'Hello',
		category:[],
		goods:[], 
		wx:"",
		jiqi:"",
		ceshi123:"",
		imei:"",
		oaid:""
      }
    },
    onLoad() {
		
		this.getcate()
		this.wxinfo()
		// this.zhixing()
		
    },
    methods: {
		
			  
		huoqujiqi:function(){
			// return new Promise((resolve, reject) => {
			// 	plus.device.getInfo({
			// 		success:function(e){
			// 			uni.clearStorageSync();
			// 			var _this = this
			// 			//这里获取到imei 剩下的逻辑也写在这里面
			// 			var imei = e.imei;
			// 			// console.log(_this.imei)
						
			// 			var ceshi = imei.split(",")
			// 			uni.setStorageSync('ceshi', ceshi[0]);
			// 			// var str1 = ceshi[0].toString();   
			// 			resolve('suc');
			// 		},
			// 		fail:(err)=>{
			// 			reject('err')
			// 		}
			// 	});
				
				
				
				
			
				
			// });
			
			
		},
		
		
		// qingqiu:function(){
		// 	return new Promise((resolve, reject) => {
		// 		var _this = this
		// 		const oaid = uni.getStorageSync('oaid')
		// 		const imei = uni.getStorageSync('imei')
		// 		console.log(oaid)
		// 		console.log(imei)
				
				
				
		// 		const xitong = uni.getSystemInfoSync();
				
		// 		let typenum = ""
		// 		if(xitong.platform == "android"){
		// 			typenum = "1"
		// 		}else{
		// 			typenum = "2"
		// 		}
				
		// 		uni.request({
		// 			url: _this.$url + "inf/user/deviceCode",
		// 			data:{
		// 				oaid:oaid,
		// 				imei2:imei,
		// 				type:typenum
		// 			},
		// 			success: (res) => {
		// 				console.log(res)
		// 			}
		// 		}); 
		// 		console.log("2");
		// 	});
		// },
		
		// zhixing:function(){
		// 	Promise.all([
		// 		this.huoqujiqi(),
		// 		this.qingqiu(),
		// 	]).then(result => {
				
		// 	})
		// },
		
		// async mountDealCount(){
		// 	await this.huoqujiqi()
		// 	// const value = uni.getStorageSync('ceshi');
		// 	// console.log(value);
		// 	return new Promise((resolve, reject) => {
		// 		plus.device.getOAID({
		// 			success:function(e){
		// 				//这里获取到imei 剩下的逻辑也写在这里面
		// 				// this.ceshi123 = str1
						
		// 				uni.setStorageSync('oaid', e.oaid);
		// 				resolve('suc');
		// 			},
		// 			fail:(err)=>{
		// 				reject('err')
		// 			}
		// 		});
				
		// 	});
		// },
		
		async loadDeal(){
			// await this.mountDealCount()
			const xitong = uni.getSystemInfoSync();
			
			let typenum = ""
			if(xitong.platform == "android"){
				typenum = "1"
			}else{
				typenum = "2"
			}
			uni.setStorageSync('typenum', typenum);
		},
		
		// async postphoneinfo(){
		// 	await this.loadDeal()
		// 	return new Promise((resolve, reject) => {
		// 		const imei = uni.getStorageSync('ceshi');
		// 		const oaid = uni.getStorageSync('oaid');
		// 		const typenum = uni.getStorageSync('typenum');
		// 		console.log(imei)
		// 		console.log(oaid)
		// 		console.log(typenum)
		// 		console.log('我在 loadDeal 之后执行')
		// 		uni.request({
		// 			url: this.$url + "inf/user/deviceCode",
		// 			data:{
		// 				oaid:oaid,
		// 				imei2:imei,
		// 				type:typenum
		// 			},
		// 			success: (res) => {
		// 				console.log(res)
		// 			}
		// 		}); 
		// 	})
			
		// },
		
		gotogangwei:function(){
			uni.switchTab({
			    url: "../job/job"
			});
		},
		qiehuan:function(id){
			this.getgoods(id)
		},
		wxinfo:function(){
			uni.request({
			    url: this.$url + "inf/user/getWeChat",
			    success: (res) => {
			        if(res.data.code == 200){
						this.wx = res.data.data.wechat
					}
					// this.indexinfo()
					
			    }
			});
		},
		indexinfo:function(){
			let a = this.wx
			var that = this
			uni.showModal({
			    content: '可复制微信号，快速添加雇主微信进行咨询',
				// showCancel:false,
				// cancel:false,
				confirmText:'复制微信号',
			    success: function (res) {
					uniCopy({
						content:a,
						success:(res)=>{
							uni.showToast({
								title: res,
								icon: 'none'
							})
						},
						error:(e)=>{
							uni.showToast({
								title: e,
							})
						}
					})
			    }
			});
		},
		
		getcate:function(){
			uni.request({
			    url: this.$url + "inf/user/getAllClassification",
			    success: (res) => {
			        if(res.data.code == 200){
						this.category = res.data.data
					}
					this.getgoods(res.data.data[0].id)
			    }
			});
		},
		
		getgoods:function(id){
			uni.request({
			    url: this.$url + "inf/user/getAllPostByType",
				data:{
					type:id
				},
			    success: (res) => {
					
			        if(res.data.code == 200){
						this.goods = res.data.data
					}
					
					
			    }
			});
		},
		
		gotodetail:function(id){
			uni.navigateTo({
			    url: "../detail/detail?id=" + id
			});
		}
			
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    },
	beforeMount(){
		// this.postphoneinfo()
	}
  }
  
</script>

<style lang="scss">
  .job {
    display: flex;
    align-items: center;
    font-size: 16px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 10px;
    margin-bottom: 10px;
    .job-title {width: 560upx}
  }
  .job-thumb {
    width: 99upx;
    height: 99upx;
    border-radius: 100px;
    margin-right: 10px;
  }
  .job-line {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #fff;
    padding: 10px 0 10px 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    line-height: 1.7;
    .job-title {
          width: 380upx;

    }
    button {
      background-color: #fff;
      display: inline-block;
      line-height: 1.8;
      margin-left: auto;

      &:after {
        display: none;
      }
    }
  }

  .job-line:nth-child(odd) {
    background: url(../../static/images/bg1.png) no-repeat;
    background-size: cover;
    background-color: #FB9F3B;
    button {
      color: #FB9F3B;
    }
  }

  .job-line:nth-child(even) {
    background: url(../../static/images/bg2.png) no-repeat;
    background-size: cover;
    background-color: #67A7F5;

    button {
      color: #67A7F5;
    }
  }

  .job-line-3 {
    background: url(../../static/images/bg3.png) no-repeat;
    background-size: cover;
    background-color: #26D7BD;

    button {
      color: #26D7BD;
    }
  }

  .area-1 {
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    font-size: 24upx;
    justify-content: space-between;

    .bg {
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      width: 217upx;
      height: 100upx;
      padding: 10px;
      border-radius: 6px;
      line-height: 1.6;

      image {
        width: 46upx;
      }
    }

    .bg-1 {
      background: linear-gradient(to right, #FF8B71, #FD594F);
    }

    .bg-2 {
      background: linear-gradient(to right, #81CCFF, #2DA2FC);
    }

    .bg-3 {
      background: linear-gradient(to right, #FF9D1D, #FF4B05);
    }

    .bg-4 {
      background: linear-gradient(to right, #FB799D, #FB2771);
    }

    .bg-5 {
      background: linear-gradient(to right, #BBA1FD, #8795FB);
    }

    .bg-6 {
      background: linear-gradient(to right, #3DE5DF, #01ACB9);
    }
  }

  .title {
    font-size: 34upx;
    margin-bottom: 20px;
  }

  .title-1 {
    color: #F7C9C9;
  }

  .page {
    padding: 0 15px;
    padding-top: var(--status-bar-height);
  }

  // 头部
  .header {
    position: fixed;
    top: 12px;
    left: 0;
    z-index: 9;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 6px 15px 6px 8px;
    padding-top: var(--status-bar-height);
    font-size: 16px;

    .icon-location {
      width: 16px;
    }

    .icon-box {
      display: flex;
      align-items: center;
    }

    .header-search {
		width: 100%;
      border-radius: 100px;
      flex: 1;
      height: 35px;
      text-align: center;
      background: #DBDBDB url(../../static/images/icon-search.png) 12px 8px no-repeat;
      background-size: 20px;
      
    }
  }

  // 轮播图
  .swiper {
    width: 692upx;
    height: 284upx;
    border-radius: 5px;
    overflow: hidden;
    margin: 20px auto 0 auto;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .nav {
    display: flex;
    margin: 20px 0;

    .nav-item {
      flex: 1;
      font-size: 14px;
      text-align: center;
    }

    image {
      width: 80upx;
      height: 80upx;
      margin-bottom: 5px;
    }
  }
</style>
